<template>
  <div style="padding: 40px">
    <el-card style="min-height: 460px" shadow="never" :body-style="{ padding: '20px' }">
      <template #header>
        <img class="mark" src="@/assets/goods/order/bookmarks.svg" alt="" />
        <span>租户企业认证</span>
      </template>
      <el-row :gutter="24" justify="center">
        <el-col :span="10">
          <el-card class="auth-card">
            <img class="auth-img" src=" @/assets/images/user-auth.svg" />
            <p>个人实名认证</p>
            <div class="status-main">
              <span v-if="userAuthInfo && userAuthInfo.attestationStatus == 0" type="danger">
                <img class="icon-status" src="@/assets/images/auditing.svg" alt="" />
              </span>
              <span v-if="userAuthInfo && userAuthInfo.attestationStatus == 2" type="danger">
                <img class="icon-status" src="@/assets/images/butongguo.svg" alt="" />
              </span>
              <span v-else-if="!userAuthInfo" type="danger">
                <img class="icon-status" src="@/assets/images/un-auth.svg" alt="" />
              </span>
              <span v-if="userAuthInfo && userAuthInfo.attestationStatus == 1" type="success">
                <img class="icon-status" src="@/assets/images/tongguo.svg" alt="" />
              </span>
            </div>
            <el-button type="primary" @click="handlePersonAdd" v-if="!userAuthInfo.id || (userAuthInfo && userAuthInfo.attestationStatus == 2)">{{
              userAuthInfo && userAuthInfo.attestationStatus == 2 ? '重新提交' : '去认证'
            }}</el-button>
            <div class="des" v-if="userAuthInfo && userAuthInfo.attestationStatus == 2">原因：{{ userAuthInfo.remark }}</div>
          </el-card>
        </el-col>
        <el-col :span="10">
          <el-card class="auth-card">
            <img class="auth-img-company" src="@/assets/images/company-auth.svg" />
            <p>企业认证</p>
            <div class="status-main">
              <span v-if="companyAuthInfo && companyAuthInfo.attestationStatus == 0" type="danger">
                <img class="icon-status" src="@/assets/images/auditing.svg" alt="" />
              </span>
              <span v-if="companyAuthInfo && companyAuthInfo.attestationStatus == 2" type="danger">
                <img class="icon-status" src="@/assets/images/butongguo.svg" alt="" />
              </span>
              <span v-else-if="!companyAuthInfo" type="danger">
                <img class="icon-status" src="@/assets/images/un-auth.svg" alt="" />
              </span>
              <span v-if="companyAuthInfo && companyAuthInfo.attestationStatus == 1" type="success">
                <img class="icon-status" src="@/assets/images/tongguo.svg" alt="" />
              </span>
            </div>

            <el-button
              type="primary"
              v-if="!companyAuthInfo.id || (companyAuthInfo && companyAuthInfo.attestationStatus == 2)"
              @click="handleCompanyAdd"
              >{{ companyAuthInfo && companyAuthInfo.attestationStatus == 2 ? '重新提交' : '去认证' }}</el-button
            >
            <div class="des" v-if="companyAuthInfo && companyAuthInfo.attestationStatus == 2">原因：{{ companyAuthInfo.remark }}</div>
          </el-card>
        </el-col>
      </el-row>
      <div style="padding-top: 10px; color: gray">说明：只需认证其中一项即可</div>
    </el-card>
  </div>
  <personCertificate ref="personCertificate" @ok="getList" />
  <companyCertificate ref="companyCertificate" @ok="getList" />
</template>

<script>
import personCertificate from './modules/personCertificate.vue';
import companyCertificate from './modules/companyCertificate.vue';
import ListMixin from '@/mixins/listMixin.js';
import useUserStore from '@/store/modules/user';
const userStore = useUserStore();
export default {
  mixins: [ListMixin],
  data() {
    return {
      urls: {
        list: '/system/tenantAttestation/list'
      },
      queryParams: {
        page: 1,
        limit: 2,
        tenantId: userStore.sysTenantVo.tenantId
      },
      userAuthInfo: {},
      companyAuthInfo: {}
    };
  },
  components: {
    personCertificate,
    companyCertificate
  },
  methods: {
    handlePersonAdd() {
      this.$refs.personCertificate.add(this.userAuthInfo);
    },
    handleCompanyAdd() {
      this.$refs.companyCertificate.add(this.companyAuthInfo);
    },
    listAfter() {
      this.userAuthInfo = this.dataSource.find((item) => item.tenantType == 1) || {};
      this.companyAuthInfo = this.dataSource.find((item) => item.tenantType == 0) || {};
      this.$forceUpdate();
    }
  }
};
</script>

<style lang="scss" scoped>
.phone-bg {
  width: 380px;
  height: 760px;
  background-size: 100% 100%;
  margin-top: 40px;
  position: fixed;
  border: 1px solid #ccc;

  .content {
    position: relative;
    border: 1px solid #ccc;
    height: 760px;
    overflow-y: scroll;
    overflow-x: hidden;
    padding: 30px;
    margin-top: 40px;

    .page {
      position: absolute;
    }

    .bg {
      position: fixed;
      width: 100%;
      width: 380px;
      height: 760px;
    }
  }
}

.left {
  display: flex;
  justify-content: center;
}

.mark {
  width: 18px;
  margin-right: 10px;
}

.phone-frame {
  position: relative;
  width: 380px;
  height: 760px;
  background-image: url('@/assets/images/iphonex.png');
  background-size: cover;
}

.ui-container {
  position: absolute;
  top: 20px;
  left: 18px;
  width: 344px;
  height: 720px;
  overflow: auto;
  border-radius: 36px;

  // 隐藏滚动条
  &::-webkit-scrollbar {
    display: none;
  }
}

.ui-container img {
  width: 100%;
  display: block;
  border-radius: 36px;
}

.status-main {
  position: absolute;
  right: 10px;
  top: 10px;
}

.auth-card {
  position: relative;
  text-align: center;
  height: 420px;

  .auth-img {
    width: 250px;
    height: 180px;
    margin-top: 30px;
  }

  .auth-img-company {
    width: 220px;
    height: 158px;
    margin-top: 50px;
  }
}

.icon-status {
  width: 120px;
}
.des {
  margin-top: 10px;
  color: #f56c6c;
}
</style>